<template>
	
	<el-card shadow="0" >
		<!-- 查询条件-->
		<el-row :gutter="10">
			<el-col :span="6">
				<el-input placeholder="请输入用户名" v-model="queryInfo.account"></el-input>
			</el-col>
			<el-col :span="6">
				<el-input placeholder="请输入电话" v-model="queryInfo.phone" ></el-input>
			</el-col>
			<el-col :span="6">
				<el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
			</el-col>
		</el-row>
		<div style="margin-top: 5px;">
			<el-col >
				<el-button  @click="openAddDialog()"
					type="primary" icon="el-icon-plus">新增</el-button>
			</el-col>
		</div>
		<el-table :data="tableData"  style="width: 100%;">
			
			<el-table-column align="center"  prop="account" label="用户名" ></el-table-column>
			<!-- <el-table-column prop="password" label="密码" width="180"></el-table-column> -->
			<el-table-column align="center" prop="phone" label="电话" ></el-table-column>
			<el-table-column align="center" prop="gender" label="性别" ></el-table-column>
			<el-table-column align="center" prop="birthday" :formatter="formatterTime" label="出生日期" ></el-table-column>
			<el-table-column align="center" prop="regTime" :formatter="formatterTime" label="注册时间" ></el-table-column>
			<el-table-column align="center" prop="dept.name" label="所属部门"></el-table-column>
			<el-table-column align="center" prop="admin.account" label="操作人"></el-table-column>
			<el-table-column align="center" label="角色" >
				<template slot-scope="scope">
					<span slot="reference" class="name-wrapper" >
						<el-tag size="medium"  style="margin-left: 10px; margin-top:5px" v-for="(role,index) in scope.row.roles" :key="index">{{role.name}}</el-tag>
					</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="openUpdateDialog(scope.row.id)">编辑</el-button>
					<el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block">
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="queryInfo.pageNum"
		      :page-sizes="[ 4, 6, 8,10]"
		      :page-size="2"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		</div>
		<!-- 导入添加的组件  默认是隐藏的 -->
		<AddUser ref="AddUser"></AddUser>
		<UpdateUser ref="UpdateUser"></UpdateUser>
	</el-card>
	
</template>

<script>
	import AddUser from './AddUser.vue';
	import UpdateUser from './UpdateUser.vue';
	export default{
		components:{
			AddUser,
			UpdateUser,
		},
		data() {
		    return {
		        tableData: [],
				total:0,
				queryInfo:{
					pageNum:1,
					pageSize:4,
					account:"",
					phone:"",
				}
		    }
		},
		methods: {
			search(){
				this.queryInfo.pageNum=1;
				this.findUsers();
			},
			formatterTime(row,column,cellValue,index){
				var date = new Date(cellValue);
				return date.toLocaleString();
			},
			handleSizeChange(val) {
				this.queryInfo.pageSize=val;
				this.queryInfo.pageNum=1;
				this.findUsers();
			},
			handleCurrentChange(val) {
				this.queryInfo.pageNum=val;
				this.findUsers();
			},
			findUsers(){
				console.log(this.queryInfo);
				//自动向后端加载角色列表数据
				this.$http.post("admin/userCtl/findUserList",this.queryInfo).then((resp)=>{
					console.log(resp.data);
					this.tableData = resp.data.data;
					this.total = resp.data.total;
				})
			},
			//打开新增对话框
			openAddDialog() {
				//让新增对话框组件显示出来,  在父组件中调用子组件的数据
				this.$refs.AddUser.dialogVisible = true;
			},
			//打开修改组件
			openUpdateDialog(id) {
				console.log(id);
				this.$refs.UpdateUser.dialogVisible = true;
				this.$refs.UpdateUser.findUserById(id);
			},
				
			deleteUser(id){
				this.$confirm('您确定要删除吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.delete("/admin/userCtl/deleteUser/" + id).then((res)=> {
						if(res.data.code == 200){
							this.$message({
							message: '删除成功',
							type: 'success'
							});
							this.$router.go();
						}
						if(resp.data.code == 201){
							this.$message({
								message: resp.data.message,
								type:'warning'
							})
						}
						
						// window.location.reload();
						
					})
				});
			}
		},
		mounted(){
			 //自动向后端加载角色列表数据
			this.findUsers();
		}
	}
</script>

<style>	
	
	
</style>
